<template>
  <div class="main">
    <!-- 头部 -->
    <div class="flex mainTop">
      <div class="flex-1" style="text-align:left">
        <img src="@/assets/img/logo.png" width="200" height="101" alt />
      </div>
      <div class="flex-1 flex" style="align-self: flex-end;justify-content: center;">
        <div>
          <img src="@/assets/img/phone.jpg" width="52" height="52" alt />
        </div>
        <div class="topRight">
          <p>咨询热线：</p>
          <p class="phone">010-86460394</p>
        </div>
      </div>
    </div>
    <!-- tab切换 -->
    <div class="tab">
      <div class="tabTree flex">
        <div
          @click="handleJump(index)"
          v-for="(item,index) in tabList"
          :key="index"
          class="tabItem"
          :style="{background:activeName===index?'#4ab344':''}"
        >
          <!-- <div v-if="index===1" class="tabOne">
                        <span> {{item}}</span>
                        <div class="bgla"></div>
          </div>-->
          <el-dropdown :hide-on-click="false" v-if="index===1">
            <span class="el-dropdown-link" style="color:#fff;height:50px;display:block">
              {{item}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="padding:5px 0">
              <el-dropdown-item>联系我们</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-else>{{item}}</span>
        </div>
      </div>
    </div>
    <!-- /**组件 */ -->
    <tabModel1 />
    <tabModel2></tabModel2>
    <tabModel3></tabModel3>
    <tabModel4 />
    <!-- <div style="width:100%;height:300px"></div> -->
    <div class="footer">
      <div class="flex" style="padding:10px 100px;">
        <div class="flex-1" style="text-align:center">
          <img src="@/assets/img/btn_address.png" alt />
          <p style="margin-top:20px">地址：北京市海淀区信息路28号6层B座-1528号/郑州市紫荆山路裕鸿国际B座-2019室</p>
        </div>
        <div class="flex-1" style="text-align:center">
          <img src="@/assets/img/btn_phone.png" alt />
          <p style="margin-top:20px">联系电话：010-86460394</p>
        </div>
        <div class="flex-1" style="text-align:center">
          <img src="@/assets/img/btn_email.png" alt />
          <p style="margin-top:20px">邮箱：bjzjjy@dingtalk.com</p>
        </div>
      </div>
      <div style="margin:20px 0 10px">
        <div class="flex" style="justify-content: center">
          <p v-for="(item,index) in bottomList" :key="index">
            <span style="padding:0 10px;">{{item}}</span>
            <span v-if="index<4">|</span>
          </p>
        </div>
        <p style="color:#666">@Copyright©2016版权所有 众匠教育</p>
        <p style="margin:10px 0 5px;color:#666">手机版</p>
        <div class="flex" style="justify-content: center;color:#222">
          <p
            v-for="(item,index) in tel"
            :key="index"
            style="padding:3px;background:#ccc;margin-right:2px;opacity:.5;border-radius:2px"
          >{{item}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tabModel1 from "@/components/tabModel1.vue";
import tabModel2 from "@/components/tabModel2.vue";
import tabModel3 from "@/components/tabModel3.vue";
import tabModel4 from "@/components/tabModel4.vue";
export default {
  components: {
    tabModel1,
    tabModel2,
    tabModel3,
    tabModel4
  },
  data() {
    return {
      activeName: 0,
      tabList: [
        "首页",
        "关于研学",
        "研学课程",
        "研学案例",
        "新闻中心",
        "关于我们",
        "留言板"
      ],
      bottomList: ["首页", "关于我们", "研学课程", "研学案例", "新闻中心"],
      tel: [0, 1, 2, 3, 0, 0, 0]
    };
  },
  methods: {
    /**tab点击切换 */
    handleJump(index) {
      this.activeName = index;
    }
  }
};
</script>
<style lang="less" >
.main {
  padding: 3px 0;
  .mainTop {
    padding: 0 300px 2px;
    height: 101px;
  }
  .footer {
    text-align: center;
    // position: fixed;
    color: rgb(169, 169, 169);
    font-size: 14px;
    // left:0;
    // bottom:0;
    width: 100%;
    padding: 10px 0;
    background: #2b2b2b;
  }
  .topRight {
    text-align: left;
    padding-left: 5px;
    .phone {
      margin-top: 7px;
      font-size: 24px;
      color: #666;
    }
  }
  .tab {
    height: 50px;
    background: #2b2b2b;
    padding: 0 300px;
    .tabOne {
      position: relative;
    }
    // .bgla{
    //     width:120px;
    //     height:40px;
    //     background: url("~/assets/img/serch-la.png") no-repeat;
    //     background-size:100% 100%
    // }
    .tabItem {
      min-width: 120px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin-right: 20px;
      img {
        width: 100%;
        height: 40px;
      }
    }
    .tabItem:hover {
      background: #4ab344;
    }
    .tabChange {
      background: #4ab344;
    }
  }
}
</style>
